<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
    <title>编辑角色</title>
    <link href="../layui-v2.5.6/css/layui.css" rel="stylesheet">
</head>
<body>
<body>
<form action="" class="layui-form layui-form-pane" id="saveForm" lay-filter="saveForm" method="post"
      style="margin: 1%;">
    <input id="id" name="id" style="display: none;" value="${role.id!}"/>
    <div class="layui-form-item">
        <label class="layui-form-label" title="角色名称">角色名称</label>
        <div class="layui-input-inline">
            <input autocomplete="off" class="layui-input" id="roleName" lay-verify="required" name="roleName"
                   type="text"
                   value="${role.roleName!}"/>
        </div>
        <label class="layui-form-label" title="角色编号">角色编号</label>
        <div class="layui-input-inline">
            <input autocomplete="off" class="layui-input" id="code" lay-verify="required" name="code" type="text"
                   value="${role.code!}"/>
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label" title="角色描述">角色描述</label>
        <div class="layui-input-block">
            <textarea class="layui-textarea" id="descpt" name="descpt" value="${role.descpt!}"></textarea>
        </div>
    </div>
<!--    <div class="layui-form-item">-->
<!--        <label class="layui-form-label" title="权限">权限</label>-->
<!--        <div class="layui-input-inline">-->
<!--            <div id="permissionTree"></div>-->
<!--        </div>-->
<!--    </div>-->
    <div class="layui-form-item" style="text-align: center;">
        <div class="layui-inline">
            <button class="layui-btn" lay-filter="save" lay-submit="" style="width: 200px;">保存</button>
        </div>
    </div>
</form>
</body>
<script src="../jquery/jquery-3.4.1.js"></script>
<script src="../layui-v2.5.6/layui.js"></script>
<script type="text/javascript">
    $(function () {
        layui.use(['form', 'tree'], function () {
            var form = layui.form;
           // var tree = layui.tree;
            var layer = layui.layer;

            //var treeData = listToTreeJson();
            // var inst1 = tree.render({
            //     elem: '#permissionTree', //绑定元素
            //     data: treeData,
            //     showCheckbox: true,
            //     id: 'permissionTree'
            // });

            form.on('submit(save)', function (data) {
              //  var array = [];
             //   var checkData = getCheckDataId(tree.getChecked('permissionTree'), array);
             //    for (var i = 0; i < checkData.length; i++) {
                //        data.field["rolePermissionList[" + i + "].permitId"] = checkData[i]
                //    }
                $.ajax({
                    type: "POST",
                    data: data.field,
                    url: "save",
                    success: function (data) {
                        if (data.status == 0) {
                            layer.alert(data.message, function () {
                                layer.closeAll();
                                var index = parent.layer.getFrameIndex(window.name);
                                parent.layer.close(index);
                            });
                        } else {
                            layer.alert(data.message);
                        }
                    },
                    error: function (data) {
                        layer.alert("操作请求错误，请您稍后再试");
                    }
                });
                return false;
            });
        });
    })


    function listToTreeJson() {
        var treeData = [];
        var rolePermission = [];
        <#if permissionList ?? >
        <#list permissionList as permission >
        treeData.push({name: '${permission.name}', id: ${permission.id}, pid: ${permission.pid}});
        </#list>
        </#if>
        <#if role ?? && role.rolePermissionList ?? >
        <#list role.rolePermissionList as rolePermission >
        rolePermission.push(${rolePermission.permitId});
        </#list>
        </#if>
        if (treeData != null) {
            var getJsonTree = function (data, parentId) {
                var itemArr = [];
                for (var i = 0; i < data.length; i++) {
                    var node = data[i];
                    if (node.pid == parentId && parentId != null) {
                        var newNode = {
                            title: node.name,
                            spread: true,
                            id: node.id,
                            pid: node.pid,
                            children: getJsonTree(data, node.id)
                        };
                        if (!newNode.children.length) {
                            if (rolePermission.indexOf(node.id) != -1) {
                                newNode.checked = true;
                            } else {
                                newNode.checked = false;
                            }
                        }
                        itemArr.push(newNode);
                    }
                }
                return itemArr;
            }
            return getJsonTree(treeData, 0);
        }
    }

    function getCheckDataId(checkData, array) {
        for (var i = 0; i < checkData.length; i++) {
            array.push(checkData[i].id);
            if (checkData[i].children) {
                getCheckDataId(checkData[i].children, array)
            }
        }
        return array;
    }
</script>
</html>